<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <script src="/assets/wang-editor/wangEditor.min.js"></script>

    <style>

        .info .el-col, .info .el-select, .info .el-input {
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>会员管理</h2>
    <el-input
            v-model="mobile"
            style="max-width: 300px"
            placeholder="请输入要查询的手机号"
            class="input-with-select"
    >
        <template #append>
            <el-button @click="changePage(1)">查询</el-button>
        </template>
    </el-input>

    <!-- 数据表 -->
    <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            style="width: 100%">
        <el-table-column
                property="createTime"
                label="注册时间"
                width="200">
        </el-table-column>

        <el-table-column
                property="mobile"
                label="用户名/手机号"
                width="150">
        </el-table-column>
        <el-table-column
                property="nickname"
                label="昵称"
                width="150">
        </el-table-column>
        <el-table-column
                label="操作"
                width="300">
            <template #default="scope">
                <el-button type="text" size="small" @click="onDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <!-- 分页组件 -->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="count"
            :current-page="page"
            @current-change="changePage">
    </el-pagination>

</div>

<script>
    let editor;
    const Main = {
        data() {
            return {
                mobile:"",
                tableData: [{}]
                , count: 0 //记录总数
                , page: 1 //当前页码
                , pageCount : 0 //总页数
            }
        }
        , methods: {
            onDelete: function(row){
                const objApp = this;
                this.$confirm( "请再次确认是否删除" + row.mobile + "会员所有数据？", "警告", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                .then(({ value }) => {
                    const params = new URLSearchParams();
                    axios.delete("/api/members/" + row.memberId , params)
                        .then(function(response){
                            const json = response.data;
                            if(json.code == "0"){
                                objApp.changePage(objApp.page);
                                ElementPlus.ElMessage.success({
                                    message: "数据已删除"
                                    ,type : "success"
                                })
                            }else{
                                console.error(json);
                                ElementPlus.ElMessage.error({
                                    message: json.message
                                    ,type : "error"
                                })
                            }
                        })
                })

            }, changePage(page) {
                //显示第几页数据
                const objApp = this;
                axios.get("/api/members?page=" + page + "&mobile=" +  objApp.mobile)
                    .then(function(response){
                        const json = response.data;
                        if(json.code == "0"){
                            const userList = json.data.list;
                            objApp.tableData.splice(0, objApp.tableData.length);
                            userList.forEach(function (item) {
                                objApp.tableData.push(item);
                            });
                            objApp.count = json.data.count;
                            objApp.page = page;
                            if(json.data.count % 10 == 0){
                                objApp.pageCount = Math.trunc(json.data.count / 10);
                            }else{
                                objApp.pageCount = Math.trunc(json.data.count / 10) + 1;
                            }

                        }else{
                            console.error(json);
                        }
                    })
            }

        }
        , mounted() {
            const objApp = this;
            this.changePage(1);
        }
    };
    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app")
</script>

</body>
</html>